<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form">
          <!-- :wrapperCol="wrapperCol" :labelCol="labelCol" -->
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="投递信息">
                <a-input v-model="queryParam.search" placeholder="请输入关键词"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="订单号">
                <a-input v-model="queryParam.orderNo" placeholder="请输入订单号"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="征订人姓名">
                <a-input v-model="queryParam.employeeName" placeholder="请输入征订人姓名"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="手机号">
                <a-input v-model="queryParam.mobile" placeholder="请输入手机号"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="报刊">
                <a-select
                  v-model="queryParam.paperId"
                  placeholder="请选择报刊"
                >
                  <a-select-option
                    v-for="(item, index) in settingList"
                    :key="index"
                    :value="item.id"
                  >
                    {{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
                <a-button style="margin-left: 8px" type="primary" @click="exportExcel">导出Excel</a-button>
              </span>
            </a-col>
          </a-row>
          <span style="color: red;">内容过多，请左右移动表格查看全部内容</span>
        </a-form>
      </div>
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :row-key="(record)=>record.id"
        :showPagination="true"
        :scroll="{ x: 2000}"
      >
        <span slot="submitState" slot-scope="text">
          <a-tag :color="(text === '待审核') ? 'orange' : (text === '待开票') ? 'blue' : (text === '待发行') ? 'purple' : 'green'">
            {{ text }}
          </a-tag>
        </span>
        <span slot="code" slot-scope="text">
          <img :src="text" style="width:80px;height:80px;" />
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <!-- <a @click="toTicketDetail(record)">
              <a-icon type="money-collect"></a-icon>
              查看发票
            </a> -->
            <!-- <a @click="toBandTicket(record)">
              <a-icon type="money-collect"></a-icon>
              绑定发票
            </a> -->
            <!-- <a-divider type="vertical" /> -->
            <a @click="toDetailOnly(record)">详情</a>
          </template>
        </span>
      </s-table>
      <detail-form :visible="detailVisible" :model="this.model" @cancel="()=>{this.detailVisible=false}" @ok="modalOk" />
      <band-ticket :visible="bandTickVisible" :model="this.model" @cancel="()=>{this.bandTickVisible=false}" @ok="modalOk" />
      <ticket-detail :visible="ticketDetailVisible" :model="this.model" @cancel="()=>{this.ticketDetailVisible=false}" @ok="modalOk" />
      <detail-only :visible="detailOnlyVisible" :model="this.model" @cancel="()=>{this.detailOnlyVisible=false}" @ok="modalOk" />
    </a-card>
  </page-header-wrapper>
</template>

<script>
/* eslint-disable */
require('script-loader!file-saver')
require('xlsx-style')
import XLSXS from 'xlsx-style'
import XLSX from 'xlsx'
// import XLSX from 'xlsx'
import { getSettingLists, getWBOrderLists } from '@/api/manage'
import { STable } from '@/components'
import DetailForm from './Detail'
import BandTicket from './BandTicket'
import moment from 'moment'
import ExportJsonExcel from 'js-export-excel'
// import { notification } from 'ant-design-vue'
import TicketDetail from './TicketDetail'
import DetailOnly from './DetailOnly'
export default {
  name: 'DeliveryListsWB',
  data () {
    return {
      form: this.$form.createForm(this, { name: 'list-wb' }),
      settingList: [],
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      model: {},
      syncFlag: false,
      detailOnlyVisible: false,
      bandTickVisible: false,
      detailVisible: false,
      ticketDetailVisible: false,
      queryParam: {},
      departmentList: [],
      columns: [
        {
          title: '#',
          customRender: (text, record, index) => { return index + 1 }
        },
        {
          title: '订单号',
          dataIndex: 'orderNo',
          fixed: 'left'
        },
        {
          title: '征订人姓名',
          width: 110,
          dataIndex: 'employeeName',
          fixed: 'left'
        },
        {
          title: '地址',
          width: 200,
          dataIndex: 'address'
        },
        {
          title: '手机',
          dataIndex: 'mobile'
        },
        {
          title: '电话',
          dataIndex: 'tel'
        },
        {
          title: '报刊',
          dataIndex: 'paperName'
        },
        {
          title: '份数',
          dataIndex: 'quantity'
        },
        {
          title: '起始日期',
          width: 130,
          dataIndex: 'beginDate',
          customRender: (text) => { return moment(text).format('YYYY/MM/DD') }
        },
        {
          title: '截止日期',
          width: 130,
          dataIndex: 'endDate',
          customRender: (text) => { return moment(text).format('YYYY/MM/DD') }
        },
        {
          title: '投递站',
          dataIndex: 'stationName'
        },
        {
          title: '投递段',
          dataIndex: 'sendsectName'
        },
        {
          title: '订户',
          width: 300,
          dataIndex: 'name'
        }
      ],
      loadData: parameter => {
        // 不要在这里修改分页大小，STable已经写死默认每一页10条
        const cParameter = { pageSize: parameter.pageSize, pageNum: parameter.pageNo }
        const requestParameter = Object.assign({}, cParameter, this.queryParam)
        getSettingLists().then(res => {
          this.settingList = res.data
          console.log(res.data)
        }).catch(e => {
          console.error(e)
        })
        return getWBOrderLists(requestParameter).then(res => {
          this.departmentList = res.data
          res.data.forEach((item) => {
            item.startDate = this.Format(item.startDate, 'yyyy-MM-dd hh:mm:ss')
            item.endDate = this.Format(item.endDate, 'yyyy-MM-dd hh:mm:ss')
          })
          return {
            data: res.data,
            totalCount: parseInt(res.headers['x-count']),
            pageNo: parameter.pageNo,
            pageSize: parameter.pageSize
          }
        })
      }
    }
  },
  components: {
    STable,
    DetailForm,
    BandTicket,
    TicketDetail,
    DetailOnly
  },
  created () {
    // this.init()
  },
  methods: {
    handleReset () {
      this.queryParam = {}
      this.form.resetFields()
    },
    handlePaperChange (value) {
      this.queryParam.paperId = value
    },
    exportExcel () {
      let aoa = []
      let tableHeader = []
      this.columns.forEach((item, index) => {
        tableHeader.push(item.title)
      })
      // 表头数据添加
      aoa.push(tableHeader)
      // 表格数据添加
      let tableData = this.departmentList.map((item, index) => {
        const result = []
        this.columns.forEach(c => {
          result.push((c.title === '#') ? index + 1 : item[c.dataIndex])
          // result[c.dataIndex] = (c.title === '#') ? index + 1 : item[c.dataIndex]
        })
        aoa.push(result)
        return result
      })
      // aoa.push(tableData)
      // 导出的表格名称
      const filename ='导出表格.xlsx'
      // Excel第一个sheet的名称
      const ws_name = 'Sheet1'
      const wb = XLSX.utils.book_new()
      const ws = XLSX.utils.aoa_to_sheet(aoa);
      console.log(ws)
      // ws['!rows'].s={
      //   font: {
      //     sz: 13,
      //     bold: true,
      //     color: {
      //       rgb: 'FFFFAA00'
      //     }
      //   },
      //   alignment: {
      //     horizontal: 'center',
      //     vertical: 'center',
      //     wrap_text: true
      //   }
      // }
      let style0 = {alignment:{horizontal:'center',wrapText: true ,vertical: "center"},font: { sz: 18, bold: true, color: { rgb: "000000" },outline:true } }
      ws['A1'].s = style0
      // ws['A1'].s = {
      //   font: {
      //     sz: 13,
      //     bold: true,
      //     color: {
      //       rgb: 'FFFFAA00'
      //     }
      //   },
      //   alignment: {
      //     horizontal: 'center',
      //     vertical: 'center',
      //     wrap_text: true
      //   }
      // }
      ws['!cols'] = [
        {
          wpx: 170
        }, {
          wpx: 70
        }, {
          wpx: 70
        }, {
          wpx: 70
        }, {
          wpx: 150
        }, {
          wpx: 120
        }
      ]
      XLSX.utils.book_append_sheet(wb, ws, ws_name) // 将数据添加到工作薄
      XLSX.writeFile(wb, filename) // 导出Excel
    },
    // exportExcel () {
    //   const options = {}
    //   options.fileName = '温报后台投递信息数据'
    //   options.datas = [
    //     {
    //       sheetData: this.departmentList.map((item, index) => {
    //         const result = {}
    //         this.columns.forEach(c => {
    //           result[c.dataIndex] = (c.title === '#') ? index + 1 : item[c.dataIndex]
    //         })
    //         return result
    //       }),
    //       sheetName: '温报后台投递信息数据',
    //       sheetFilter: this.columns.map(item => item.dataIndex),
    //       sheetHeader: this.columns.map(item => item.title),
    //       columnWidths: this.columns.map(() => 10)
    //     }
    //   ]
    //   const toExcel = new ExportJsonExcel(options)
    //   toExcel.saveExcel()
    // },
    toDetailOnly (record) {
      this.model = record
      this.detailOnlyVisible = true
    },
    toTicketDetail (record) {
      this.model = record
      this.ticketDetailVisible = true
    },
    modalOk () {
      this.model = {}
      this.detailVisible = false
      this.bandTickVisible = false
      this.$refs.table.refresh(false)
    },
    // init () {
    //   getDeliveriesLists({ pageSize: this.pageSize, pageNum: this.pageNo }).then(res => {
    //     this.departmentList = res.data
    //     console.log(this.departmentList)
    //   })
    // },
    toAdd () {
      this.model = {}
      this.detailVisible = true
    },
    toBandTicket (record) {
      this.model = record
      this.bandTickVisible = true
    },
    toDetail (record) {
      this.model = record
      this.detailVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
